@import "../variables";
@import "../colors";
@import "../mixins";

.gallery {
    text-align: center;

    .col-12 {
        padding-left: ($grid-gutter-width / 2);
        padding-right: ($grid-gutter-width / 2);
        padding-top: ($grid-gutter-width / 2);
        padding-bottom: ($grid-gutter-width / 2);
    }

    a {
        width: 100%;
        image-rendering: auto;
        -webkit-backface-visibility: hidden;
        @include transition($transition-base);

        @include hover-focus-active {
            transform: scale(1.05);
        }

        img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            cursor: pointer;
            background-color: $trans-med;
        }
    }
}
.fancybox {
    &-container {
        @include hover-focus-active {
            outline: none;
        }
    }
    &-slide > * {
        padding: 0 !important;
    }
    &-caption {
        font-family: inherit !important;
        font-size: 2rem !important;
        line-height: 2rem !important;
        padding-top: 0rem !important;
        padding-bottom: 3rem !important;
        text-align: center !important;
        border-top: 0 solid transparent !important;

        a {
            color: rgba($white, 0.4) !important;
            text-decoration: none !important;
            @include transition($transition-base);

            b {
                color: rgba($white, 1) !important;
            }

            @include hover-focus-active {
                opacity: 1;
            }
        }
    }
    &-video {
        display: none;
        width: 100%;

        @include media-breakpoint-up(lg) {
            width: 67%;
        }
    }
}
